
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie ie9" lang="en" class="no-js"> <![endif]-->
<!--[if !(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<title>Buttons | KingAdmin - Admin Dashboard</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
	<meta name="author" content="The Develovers">

	<!-- CSS -->
	<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
	<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css">
	<link href="assets/css/main.css" rel="stylesheet" type="text/css">

	<!-- CSS for demo style switcher. you can remove this -->
	<link href="demo-style-switcher/assets/css/style-switcher.css" rel="stylesheet" type="text/css">

	<!-- Fav and touch icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
	<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
	<link rel="shortcut icon" href="assets/ico/favicon.png">

</head>
<body >
	<!-- WRAPPER -->
	<div class="wrapper">
		
		<!-- TOP GENERAL ALERT -->
		<div class="alert alert-danger top-general-alert">
			<span>If you <strong>can't see the logo</strong> on the top left, please reset the style on right style switcher (for upgraded theme only).</span>
			<a type="button" class="close">&times;</a>
		</div>
		<!-- END TOP GENERAL ALERT -->

		<!-- TOP BAR -->
		<div class="top-bar">
			<div class="container">
				<div class="row">
					<!-- logo -->
					<div class="col-md-2 logo">
						<a href="index.html"><img src="assets/img/kingadmin-logo-white.png" alt="KingAdmin - Admin Dashboard" /></a>
						<h1 class="sr-only">KingAdmin Admin Dashboard</h1>
					</div>
					<!-- end logo -->
					<div class="col-md-10">
						<div class="row">
							<div class="col-md-3">
								<!-- search box -->
								<div id="tour-searchbox" class="input-group searchbox">
									<input type="search" class="form-control" placeholder="enter keyword here...">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
									</span>
								</div>
								<!-- end search box -->
							</div>
							<div class="col-md-9">
								<div class="top-bar-right">
									<!-- responsive menu bar icon -->
									<a href="ui-elements-buttons.html#" class="hidden-md hidden-lg main-nav-toggle"><i class="fa fa-bars"></i></a>
									<!-- end responsive menu bar icon -->
									<button type="button" id="start-tour" class="btn btn-link"><i class="fa fa-refresh"></i> Start Tour</button>
									<button type="button" id="global-volume" class="btn btn-link btn-global-volume"><i class="fa"></i> <span class="badge element-bg-color-blue">New</span></button>
									<div class="notifications">
										<ul>
											<!-- notification: inbox -->
											<li class="notification-item inbox">
												<div class="btn-group">
													<a href="ui-elements-buttons.html#" class="dropdown-toggle" data-toggle="dropdown">
														<i class="fa fa-envelope"></i><span class="count">2</span>
														<span class="circle"></span>
													</a>

													<ul class="dropdown-menu" role="menu">
														<li class="notification-header">
															<em>You have 2 unread messages</em>
														</li>
														<li class="inbox-item clearfix">
															<a href="ui-elements-buttons.html#">
																<div class="media">
																	<div class="pull-left" href="#">
																		<img class="media-object" src="assets/img/user1.png" alt="Antonio">
																	</div>
																	<div class="media-body">
																		<h5 class="media-heading name">Antonius</h5>
																		<p class="text">The problem just happened this morning. I can't see ...</p>
																		<span class="timestamp">4 minutes ago</span>
																	</div>
																</div>
															</a>
														</li>
														<li class="inbox-item unread clearfix">
															<a href="ui-elements-buttons.html#">
																<div class="media">
																	<div class="pull-left" href="#">
																		<img class="media-object" src="assets/img/user2.png" alt="Antonio">
																	</div>
																	<div class="media-body">
																		<h5 class="media-heading name">Michael</h5>
																		<p class="text">Hey dude, cool theme!</p>
																		<span class="timestamp">2 hours ago</span>
																	</div>
																</div>
															</a>
														</li>
														<li class="inbox-item unread clearfix">
															<a href="ui-elements-buttons.html#">
																<div class="media">
																	<div class="pull-left" href="#">
																		<img class="media-object" src="assets/img/user3.png" alt="Antonio">
																	</div>
																	<div class="media-body">
																		<h5 class="media-heading name">Stella</h5>
																		<p class="text">Ok now I can see the status for each item. Thanks! :D</p>
																		<span class="timestamp">Oct 6</span>
																	</div>
																</div>
															</a>
														</li>
														<li class="inbox-item clearfix">
															<a href="ui-elements-buttons.html#">
																<div class="media">
																	<div class="pull-left" href="#">
																		<img class="media-object" src="assets/img/user4.png" alt="Antonio">
																	</div>
																	<div class="media-body">
																		<h5 class="media-heading name">Jane Doe</h5>
																		<p class="text"><i class="fa fa-reply"></i> Please check the status of your ...</p>
																		<span class="timestamp">Oct 2</span>
																	</div>
																</div>
															</a>
														</li>
														<li class="inbox-item clearfix">
															<a href="ui-elements-buttons.html#">
																<div class="media">
																	<div class="pull-left" href="#">
																		<img class="media-object" src="assets/img/user5.png" alt="Antonio">
																	</div>
																	<div class="media-body">
																		<h5 class="media-heading name">John Simmons</h5>
																		<p class="text"><i class="fa fa-reply"></i> I've fixed the problem :)</p>
																		<span class="timestamp">Sep 12</span>
																	</div>
																</div>
															</a>
														</li>
														<li class="notification-footer">
															<a href="ui-elements-buttons.html#">View All Messages</a>
														</li>
													</ul>
												</div>
											</li>
											<!-- end notification: inbox -->

											<!-- notification: general -->
											<li class="notification-item general">
												<div class="btn-group">
													<a href="ui-elements-buttons.html#" class="dropdown-toggle" data-toggle="dropdown">
														<i class="fa fa-bell"></i><span class="count">8</span>
														<span class="circle"></span>
													</a>
													<ul class="dropdown-menu" role="menu">
														<li class="notification-header">
															<em>You have 8 notifications</em>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-comment green-font"></i>
																<span class="text">New comment on the blog post</span>
																<span class="timestamp">1 minute ago</span>
															</a>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-user green-font"></i>
																<span class="text">New registered user</span>
																<span class="timestamp">12 minutes ago</span>
															</a>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-comment green-font"></i>
																<span class="text">New comment on the blog post</span>
																<span class="timestamp">18 minutes ago</span>
															</a>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-shopping-cart red-font"></i>
																<span class="text">4 new sales order</span>
																<span class="timestamp">4 hours ago</span>
															</a>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-edit yellow-font"></i>
																<span class="text">3 product reviews awaiting moderation</span>
																<span class="timestamp">1 day ago</span>
															</a>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-comment green-font"></i>
																<span class="text">New comment on the blog post</span>
																<span class="timestamp">3 days ago</span>
															</a>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-comment green-font"></i>
																<span class="text">New comment on the blog post</span>
																<span class="timestamp">Oct 15</span>
															</a>
														</li>
														<li>
															<a href="ui-elements-buttons.html#">
																<i class="fa fa-warning red-font"></i>
																<span class="text red-font">Low disk space!</span>
																<span class="timestamp">Oct 11</span>
															</a>
														</li>
														<li class="notification-footer">
															<a href="ui-elements-buttons.html#">View All Notifications</a>
														</li>
													</ul>
												</div>
											</li>
											<!-- end notification: general -->
										</ul>
									</div>

									<!-- logged user and the menu -->
									<div class="logged-user">
										<div class="btn-group">
											<a href="ui-elements-buttons.html#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
												<img src="assets/img/user-avatar.png" />
												<span class="name">Stacy Rose</span> <span class="caret"></span>
											</a>
											<ul class="dropdown-menu" role="menu">
												<li>
													<a href="ui-elements-buttons.html#">
														<i class="fa fa-user"></i>
														<span class="text">Profile</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-buttons.html#">
														<i class="fa fa-cog"></i>
														<span class="text">Settings</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-buttons.html#">
														<i class="fa fa-power-off"></i>
														<span class="text">Logout</span>
													</a>
												</li>
											</ul>
										</div>
									</div>
									<!-- end logged user and the menu -->
								</div><!-- /top-bar-right -->
							</div>
						</div><!-- /row -->
					</div>
				</div><!-- /row -->
			</div><!-- /container -->
		</div><!-- /top -->
		

		<!-- BOTTOM: LEFT NAV AND RIGHT MAIN CONTENT -->
		<div class="bottom">
			<div class="container">
				<div class="row">
					<!-- left sidebar -->
					<div class="col-md-2 left-sidebar">

						<!-- main-nav -->
						<nav class="main-nav">
							
							<ul class="main-menu">
								<li ><a href="index.html"><i class="fa fa-dashboard fa-fw"></i><span class="text">Dashboard</span></a></li>
								<li ><a href="ui-elements-buttons.html#" class="js-sub-menu-toggle"><i class="fa fa-clipboard fa-fw"></i><span class="text">Pages</span>
									<i class="toggle-icon fa fa-angle-left"></i></a>
									<ul class="sub-menu ">
										<li ><a href="page-profile.html"><span class="text">Profile</span></a></li>
										<li ><a href="page-invoice.html"><span class="text">Invoice</span></a></li>
										<li ><a href="page-knowledgebase.html"><span class="text">Knowledge Base</span></a></li>
										<li ><a href="page-inbox.html"><span class="text">Inbox</span></a></li>
										<li ><a href="page-register.html"><span class="text">Register</span></a></li>
										<li ><a href="page-login.html"><span class="text">Login</span></a></li>
										<li ><a href="page-404.html"><span class="text">404</span></a></li>
										<li ><a href="page-blank.html"><span class="text">Blank Page</span></a></li>
									</ul>
								</li>
								<li ><a href="ui-elements-buttons.html#" class="js-sub-menu-toggle"><i class="fa fa-bar-chart-o fw"></i><span class="text">Charts &amp; Statistics</span>
									<i class="toggle-icon fa fa-angle-left"></i></a>
									<ul class="sub-menu ">
										<li ><a href="charts-statistics.html"><span class="text">Charts</span></a></li>
										<li ><a href="charts-statistics-interactive.html"><span class="text">Interactive Charts</span></a></li>
										<li ><a href="charts-statistics-real-time.html"><span class="text">Realtime Charts</span></a></li>
										<li ><a href="charts-d3charts.html"><span class="text">D3 Charts</span></a></li>
									</ul>
								</li>
								<li ><a href="ui-elements-buttons.html#" class="js-sub-menu-toggle"><i class="fa fa-edit fw"></i><span class="text">Forms</span>
									<i class="toggle-icon fa fa-angle-left"></i></a>
									<ul class="sub-menu ">
										<li ><a href="form-inplace-editing.html"><span class="text">In-place Editing <span class="badge element-bg-color-blue">New</span></span></a></li>
										<li ><a href="form-elements.html"><span class="text">Form Elements <span class="badge element-bg-color-blue">Updated</span></span></a></li>
										<li ><a href="form-layouts.html"><span class="text">Form Layouts <span class="badge element-bg-color-blue">New</span></span></a></li>
										<li ><a href="form-bootstrap-elements.html"><span class="text">Bootstrap Elements <span class="badge element-bg-color-blue">New</span></span></a></li>
										<li ><a href="form-validations.html"><span class="text">Validation</span></a></li>
										<li ><a href="form-file-upload.html"><span class="text">File Upload</span></a></li>
										<li ><a href="form-text-editor.html"><span class="text">Text Editor <span class="badge element-bg-color-blue">New</span></span></a></li>
									</ul>
								</li>
								<li class="active"><a href="ui-elements-buttons.html#" class="js-sub-menu-toggle"><i class="fa fa-list-alt fw"></i><span class="text">UI Elements</span>
									<i class="toggle-icon fa fa-angle-left"></i></a>
									<ul class="sub-menu open">
										<li ><a href="ui-elements-general.html"><span class="text">General Elements</span></a></li>
										<li class="active"><a href="ui-elements-buttons.html"><span class="text">Buttons <span class="badge element-bg-color-blue">Updated</span></span></a></li>
										<li ><a href="ui-elements-icons.html"><span class="text">Icons</span></a></li>
										<li ><a href="ui-elements-flash-message.html"><span class="text">Flash Message</span></a></li>
									</ul>
								</li>
								<li ><a href="widgets.html"><i class="fa fa-puzzle-piece fa-fw"></i><span class="text">Widgets</span></a></li>
								<li ><a href="ui-elements-buttons.html#" class="js-sub-menu-toggle"><i class="fa fa-gears fw"></i><span class="text">Components</span>
									<i class="toggle-icon fa fa-angle-left"></i></a>
									<ul class="sub-menu ">
										<li ><a href="components-wizard.html"><span class="text">Wizard (with validation)</span></a></li>
										<li ><a href="components-calendar.html"><span class="text">Calendar</span></a></li>
										<li ><a href="components-maps.html"><span class="text">Maps</span></a></li>
										<li ><a href="components-gallery.html"><span class="text">Gallery</span></a></li>
									</ul>
								</li>
								<li ><a href="ui-elements-buttons.html#" class="js-sub-menu-toggle"><i class="fa fa-table fw"></i><span class="text">Tables</span>
									<i class="toggle-icon fa fa-angle-left"></i></a>
									<ul class="sub-menu ">
										<li ><a href="tables-static-table.html"><span class="text">Static Table</span></a></li>
										<li ><a href="tables-dynamic-table.html"><span class="text">Dynamic Table</span></a></li>
									</ul>
								</li>
								<li ><a href="typography.html"><i class="fa fa-font fa-fw"></i><span class="text">Typography</span></a></li>
							</ul>
						</nav><!-- /main-nav -->

						<div class="sidebar-minified js-toggle-minified">
							<i class="fa fa-angle-left"></i>
						</div>

						<!-- sidebar content -->
						<div class="sidebar-content">
							<div class="panel panel-default">
								<div class="panel-heading"><h5><i class="fa fa-lightbulb-o"></i> Tips</h5></div>
								<div class="panel-body">
									<p>You can do live search to the widget at search box located at top bar. It's very useful if your dashboard is full of widget.</p>
								</div>
							</div>
							
							<h5 class="label label-default"><i class="fa fa-info-circle"></i> Server Info</h5>
							<ul class="list-unstyled list-info-sidebar bottom-30px">
								<li class="data-row">
									<span class="data-name">Disk Space Usage</span>
									<span class="data-value">
										274.43 / 2 GB
										<div class="progress progress-xs">
											<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
												<span class="sr-only">10%</span>
											</div>
										</div>
									</span>
								</li>
								<li class="data-row">
									<span class="data-name">Monthly Bandwidth Transfer</span>
									<span class="data-value">
										230 / 500 GB
										<div class="progress progress-xs">
											<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" style="width: 46%">
												<span class="sr-only">46%</span>
											</div>
										</div>
									</span>
								</li>
								<li class="data-row">
									<span class="data-name">Database Disk Space</span>
									<span class="data-value">219.45 MB</span>
								</li>
								<li class="data-row">
									<span class="data-name">Operating System</span>
									<span class="data-value">Linux</span>
								</li>
								<li class="data-row">
									<span class="data-name">Apache Version</span>
									<span class="data-value">2.4.6</span>
								</li>
								<li class="data-row">
									<span class="data-name">PHP Version</span>
									<span class="data-value">5.3.27</span>
								</li>
								<li class="data-row">
									<span class="data-name">MySQL Version</span>
									<span class="data-value">5.5.34-cll</span>
								</li>
								<li class="data-row">
									<span class="data-name">Architecture</span>
									<span class="data-value">x86_64</span>
								</li>
							</ul>
						</div>
						<!-- end sidebar content -->
					</div>
					<!-- end left sidebar -->

					<!-- content-wrapper -->
					<div class="col-md-10 content-wrapper">
						<div class="row">
							<div class="col-lg-4 ">
								<ul class="breadcrumb">
									<li><i class="fa fa-home"></i><a href="ui-elements-buttons.html#">Home</a></li>
									<li><a href="ui-elements-buttons.html#">UI Elements</a></li> <li class="active">Buttons</li>
								</ul>
							</div>
							<div class="col-lg-8 ">
								<div class="top-content">
									<ul class="list-inline quick-access">
										<li>
											<a href="charts-statistics-interactive.html">
												<span class="quick-access-item bg-color-green">
													<i class="fa fa-bar-chart-o"></i>
													<h5>CHARTS</h5><em>basic, interactive, real-time</em>
												</span>
											</a>
										</li>
										<li>
											<a href="page-inbox.html">
												<span class="quick-access-item bg-color-blue">
													<i class="fa fa-envelope"></i>
													<h5>INBOX</h5><em>inbox with gmail style</em>
												</span>
											</a>
										</li>
										<li>
											<a href="tables-dynamic-table.html">
												<span class="quick-access-item bg-color-orange">
													<i class="fa fa-table"></i>
													<h5>DYNAMIC TABLE</h5><em>tons of features and interactivity</em>
												</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						
						<!-- main -->
						<div class="content">
							<div class="main-header">
								<h2>Buttons</h2>
								<em>general buttons with various style and icon collections</em>
							</div>

							<div class="main-content">
								<div class="row">
									<div class="col-md-6">
										<!-- BASIC BUTTON -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-square"></i> Basic</h3></div>
											<div class="widget-content">
												<p>
													<button type="button" class="btn btn-default">Default</button>
													<button type="button" class="btn btn-primary">Primary</button>
													<button type="button" class="btn btn-info">Info</button>
													<button type="button" class="btn btn-success">Success</button>
													<button type="button" class="btn btn-warning">Warning</button>
												</p>
												<p>
													<button type="button" class="btn btn-custom-primary">Custom Primary</button>
													<button type="button" class="btn btn-custom-secondary">Custom Secondary</button>
													<button type="button" class="btn btn-danger">Danger</button>
													<button type="button" class="btn btn-link">Link</button>
												</p>
												<p><a class="btn btn-lg btn-primary" href="ui-elements-buttons.html#"><i class="fa fa-download fa-3x pull-left"></i> Download The Guide<br /><small>Version 2.0</small></a></p>
											</div>
										</div>
										<!-- END BASIC BUTTON -->
										
										<!-- BUTTON SIZE -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-signal fa-rotate-90"></i> Button Size</h3></div>
											<div class="widget-content">
												<button type="button" class="btn btn-default btn-lg">Large Size</button>
												<button type="button" class="btn btn-primary">Default Size</button>
												<button type="button" class="btn btn-info btn-sm">Small Size</button>
												<button type="button" class="btn btn-success btn-xs">Extra Small Size</button>
												<hr class="inner-separator"/>
												<div class="row">
													<div class="col-md-6"><button type="button" class="btn btn-primary btn-block">Button Block</button></div>
													<div class="col-md-6"><button type="button" class="btn btn-warning btn-block">Button Block</button></div>
												</div>
												<hr class="inner-separator"/>
												<button type="button" class="btn btn-danger btn-block">Button Block</button>
											</div>
										</div>
										<!-- END BUTTON SIZE -->

										<!-- BUTTON GROUPS -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-square"></i> Button Groups</h3></div>
											<div class="widget-content">
												<div class="btn-group">
													<button type="button" class="btn btn-success">Left</button>
													<button type="button" class="btn btn-warning">Middle</button>
													<button type="button" class="btn btn-danger">Right</button>
												</div>
												<div class="btn-group">
													<a class="btn btn-default" href="ui-elements-buttons.html#"><i class="fa fa-align-left"></i></a>
													<a class="btn btn-default" href="ui-elements-buttons.html#"><i class="fa fa-align-center"></i></a>
													<a class="btn btn-default" href="ui-elements-buttons.html#"><i class="fa fa-align-right"></i></a>
													<a class="btn btn-default" href="ui-elements-buttons.html#"><i class="fa fa-align-justify"></i></a>
												</div><br/><br/>
												<div class="btn-group">
													<button type="button" class="btn btn-primary">Button 1</button>
													<button type="button" class="btn btn-primary">Button 2</button>
													<div class="btn-group">
														<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Others <span class="caret"></span></button>
														<ul class="dropdown-menu">
															<li><a href="ui-elements-buttons.html#">Dropdown link</a></li>
															<li><a href="ui-elements-buttons.html#">Dropdown link</a></li>
														</ul>
													</div>
												</div><br/><br/>
												<div class="btn-group btn-group-lg">
													<button type="button" class="btn btn-success">Left</button>
													<button type="button" class="btn btn-warning">Middle</button>
													<button type="button" class="btn btn-danger">Right</button>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-success">Left</button>
													<button type="button" class="btn btn-warning">Middle</button>
													<button type="button" class="btn btn-danger">Right</button>
												</div><br/><br/>
												<div class="btn-group btn-group-sm">
													<button type="button" class="btn btn-success">Left</button>
													<button type="button" class="btn btn-warning">Middle</button>
													<button type="button" class="btn btn-danger">Right</button>
												</div>
												<div class="btn-group btn-group-xs">
													<button type="button" class="btn btn-success">Left</button>
													<button type="button" class="btn btn-warning">Middle</button>
													<button type="button" class="btn btn-danger">Right</button>
												</div>
											</div>
										</div>
										<!-- END BUTTON GROUPS -->
									</div>

									<div class="col-md-6">
										<!-- ICONS BUTTONS -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-info-circle"></i> Icon Buttons</h3></div>
											<div class="widget-content">
												<p>
													<button type="button" class="btn btn-default"><i class="fa fa-plus-square"></i> Default </button>
													<button type="button" class="btn btn-primary"><i class="fa fa-refresh"></i> Primary</button>
													<button type="button" class="btn btn-info"><i class="fa fa-info-circle"></i> Info</button>
													<button type="button" class="btn btn-primary" disabled="disabled"><i class="fa fa-refresh fa-spin"></i> Refreshing...</button>
												</p>
												<p>
													<button type="button" class="btn btn-success"><i class="fa fa-check-circle"></i> Success</button>
													<button type="button" class="btn btn-warning"><i class="fa fa-warning"></i> Warning</button>
													<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i> Danger</button>
													<button type="button" class="btn btn-primary" disabled="disabled"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
												</p>
												<p class="alert alert-info"><i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.</p>
											</div>
										</div>
										<!-- END ICONS BUTTONS -->

										<!-- DISABLED BUTTONS -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-times"></i> Disabled Buttons</h3></div>
											<div class="widget-content">
												<button type="button" class="btn btn-default" disabled="disabled">Default</button>
												<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
												<button type="button" class="btn btn-info" disabled="disabled">Info</button>
												<button type="button" class="btn btn-success" disabled="disabled">Success</button>
												<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
												<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
											</div>
										</div>
										<!-- END DISABLED BUTTONS -->

										<!-- BUTTON DROPDOWN -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-list"></i> Button Dropdown</h3></div>
											<div class="widget-content">
												<div class="btn-group">
													<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-primary btn-md dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><i class="fa fa-warning"></i> Warning <span class="caret"></span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<hr class="inner-separator"/>
												<div class="btn-group">
													<button type="button" class="btn btn-default btn-lg">Default</button>
													<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-primary btn-md">Primary</button>
													<button type="button" class="btn btn-primary btn-md dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-info btn-sm">Info</button>
													<button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-success btn-xs">Success</button>
													<button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div><br/><br/>
												<div class="btn-group">
													<button type="button" class="btn btn-warning btn-md"><i class="fa fa-warning"></i> Warning</button>
													<button type="button" class="btn btn-warning btn-md dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
												<div class="btn-group">
													<button type="button" class="btn btn-danger btn-md"><i class="fa fa-bolt"></i> Danger</button>
													<button type="button" class="btn btn-danger btn-md dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
													<ul class="dropdown-menu" role="menu">
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Action</a></li>
														<li class="disabled"><a href="ui-elements-buttons.html#">Disabled link</a></li>
														<li><a href="ui-elements-buttons.html#">Something else here</a></li>
														<li class="divider"></li>
														<li class="dropdown-header">Dropdown Header</li>
														<li><a href="ui-elements-buttons.html#">Separated link</a></li>
													</ul>
												</div>
											</div>
										</div>
										<!-- END BUTTON DROPDOWN -->

										<!-- MORE BUTTONS -->
										<div class="widget">
											<div class="widget-header">
												<h3><i class="fa fa-list"></i> Do More With Buttons</h3>
												<div class="btn-group widget-header-toolbar">
													<div class="label label-info">NEW</div>
												</div>
											</div>
											<div class="widget-content">
												<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">Loading state</button>
												<span id="server-message">Please click the button on the left :)</span>
												<hr class="inner-separator" />
												<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
												<hr class="inner-separator" />
												<h4>Checkboxes As Buttons Group</h4>
												<div class="btn-group" data-toggle="buttons">
													<label class="btn btn-primary">
														<input type="checkbox"> Option 1
													</label>
													<label class="btn btn-primary">
														<input type="checkbox"> Option 2
													</label>
													<label class="btn btn-primary">
														<input type="checkbox"> Option 3
													</label>
												</div>
												<hr class="inner-separator" />
												<h4>Radio As Buttons Group</h4>
												<div class="btn-group" data-toggle="buttons">
													<label class="btn btn-warning">
														<input type="radio" name="options" id="option1"> Option 1
													</label>
													<label class="btn btn-warning">
														<input type="radio" name="options" id="option2"> Option 2
													</label>
													<label class="btn btn-warning">
														<input type="radio" name="options" id="option3"> Option 3
													</label>
												</div>

											</div>
										</div>
										<!-- END MORE BUTTONS -->
									</div>
								</div>
							</div><!-- /main-content -->
						</div><!-- /main -->
					</div><!-- /content-wrapper -->
				</div><!-- /row -->
			</div><!-- /container -->
		</div>
		<!-- END BOTTOM: LEFT NAV AND RIGHT MAIN CONTENT -->
		<div class="push-sticky-footer"></div>
	</div><!-- /wrapper -->

	<!-- FOOTER -->
	<footer class="footer">
		&copy; 2014 The Develovers
	</footer>
	<!-- END FOOTER -->

	<!-- STYLE SWITCHER -->
	<div class="del-style-switcher">
		<div class="del-switcher-toggle toggle-hide"></div>
		<form>
			<section class="del-section del-section-skin">
				<h5 class="del-switcher-header">Choose Skins:</h5>

				<ul>
					<li><a href="ui-elements-buttons.html#" title="Slate Gray" class="switch-skin slategray" data-skin="assets/css/skins/slategray.css">Slate Gray</a></li>
					<li><a href="ui-elements-buttons.html#" title="Dark Blue" class="switch-skin darkblue" data-skin="assets/css/skins/darkblue.css">Dark Blue</a></li>
					<li><a href="ui-elements-buttons.html#" title="Dark Brown" class="switch-skin darkbrown" data-skin="assets/css/skins/darkbrown.css">Dark Brown</a></li>
					<li><a href="ui-elements-buttons.html#" title="Light Green" class="switch-skin lightgreen" data-skin="assets/css/skins/lightgreen.css">Light Green</a></li>
					<li><a href="ui-elements-buttons.html#" title="Orange" class="switch-skin orange" data-skin="assets/css/skins/orange.css">Orange</a></li>
					<li><a href="ui-elements-buttons.html#" title="Red" class="switch-skin red" data-skin="assets/css/skins/red.css">Red</a></li>
					<li><a href="ui-elements-buttons.html#" title="Teal" class="switch-skin teal" data-skin="assets/css/skins/teal.css">Teal</a></li>
					<li><a href="ui-elements-buttons.html#" title="Yellow" class="switch-skin yellow" data-skin="assets/css/skins/yellow.css">Yellow</a></li>
				</ul>

				<button type="button" class="switch-skin-full fulldark" data-skin="assets/css/skins/fulldark.css">Full Dark</button>
				<button type="button" class="switch-skin-full fullbright" data-skin="assets/css/skins/fullbright.css">Full Bright</button>
			</section>
			
			<p><a href="ui-elements-buttons.html#" title="Reset Style" class="del-reset-style">Reset Style</a></p>
		</form>
	</div>
	<!-- END STYLE SWITCHER -->

	<!-- Javascript -->
	<script src="assets/js/jquery-2.1.0.min.js"></script>
	<script src="assets/js/bootstrap.js"></script>
	<script src="assets/js/modernizr.js"></script>
	<script src="assets/js/bootstrap-tour.custom.js"></script>
	<script src="assets/js/king-common.min.js"></script>
	<script src="demo-style-switcher/assets/js/deliswitch.js"></script>
	<script src="assets/js/king-elements.min.js"></script>

</body>
</html>

